<DIV class="container">
	<DIV class="input-group p-3" *ngIf="step2">
		<SPAN class="input-group-text">我要抽</SPAN>
		<SELECT class="form-select" ngDefaultControl [(ngModel)]="selectedOption">
			<OPTION [value]="option.numberOfCards" *ngFor="let option of options">
				{{option.characterData}}
			</OPTION>
		</SELECT>
		<SPAN class="input-group-text">張牌</SPAN>
	</DIV>

	<BUTTON class="btn btn-primary m-3" (click)="toggleStep2()" *ngIf="step1">
		開始抽牌
	</BUTTON>

	<DIV *ngIf="step2">
		<P>請心中想著問題<BR/>(有指定對象或事物也請一起想著)<BR/>想完之後請按下確定</P>
		<BUTTON class="btn btn-primary m-3" (click)="toggleStep1()">取消</BUTTON>
		<BUTTON class="btn btn-primary m-3" (click)="toggleStep3()">確定</BUTTON>
	</DIV>

	<DIV *ngIf="step3">
		<BUTTON class="btn btn-primary m-3" (click)="toggleStep1()">重來一次</BUTTON>
	</DIV>
</DIV>

<DIV class="d-flex justify-content-center" *ngIf="step3">
	<DIV class="p-3 bd-highlight bg-danger text-white fs-1 m-3" *ngFor="let card of cards">
		{{card + 1}}
	</DIV>
</DIV>